<script setup lang="ts">
import { IActionParam, ILayoutOpts } from '@core';

interface FormGroupProps {
  name: string;
  layoutOpts?: ILayoutOpts;
  label?: string;
  required?: boolean;
  visible?: boolean;
  labelWidth?: number;
  rules?: any;
  error?: string;
  labelClass?: string;
}
interface FormGroupEmit {
  (name: 'componentEvent', value: IActionParam): void;
}
const props = withDefaults(defineProps<FormGroupProps>(), {
  required: false,
  visible: true,
});
const emit = defineEmits<FormGroupEmit>();

onBeforeMount(() => {
  initRules();
});

let itemRules: any = [];
const initRules = () => {
  if (props.rules) {
    itemRules.push(...props.rules);
  }
  if (props.required) {
    itemRules.push({
      trigger: ['change', 'blur'],
      required: props.required,
      message: props.label + '必须填写',
    });
  }
};
//
</script>

<template>
  <AppCol :visible="visible" noRoot :layoutOpts="layoutOpts" class="app-form-item">
    <template v-slot:default="{slotStyle, slotClass}">
      <a-form-item
        :class="slotClass"
        :style="slotStyle"
        :name="name"
        :rules="itemRules"
        :help="error"
        :required="required"
        :labelCol="{ style: { width: `${labelWidth}px` } }"
        :validateStatus="error ? 'error' : 'validating'"
      >
        <template #label>
          <label :class="labelClass">
            <div class="label-title">{{ label }}</div>
          </label>
        </template>
        <slot></slot>
      </a-form-item>
    </template>
  </AppCol>
</template>

<style lang="scss">
</style>